<template>
	<view class="invitation-page">
		<detail-head url="/pages/mine/mine" type="none"></detail-head>
		<view class="head">
			<button class="btn" type="default" @click="onGenerateIng">立即邀请</button>
			<view class="desc">好友购买首发可以获得<br>2%的分佣</view>
			<view class="desc-2">一次推广永久收益</view>
		</view>
		<view class="info">
			<view class="content">
				<view class="item">
					<view class="label">
						邀请人数
						<text>(人)</text>
					</view>
					<view class="value">{{total}}</view>
				</view>
				<view class="item">
					<view class="label">
						我的收益
						<text> (元)</text>
					</view>
					<view class="value">{{user.brokerage}}</view>
				</view>
			</view>
		</view>
		<view class="list">
			<app-title text="邀请记录" :width="64"></app-title>
			<view class="invitation-table-head">
				<view class="table-head-item">头像</view>
				<view class="table-head-item">昵称</view>
				<view class="table-head-item">时间</view>
			</view>
			<view class="table-main-item" v-for="item in listData" :key="item.wechatNickname">
				<view class="item-portrait">
					<img :src="item.wechatHeadimgurl" alt="">
				</view>
				<view class="item-name">{{item.wechatNickname}}</view>
				<view class="item-time">{{item.createTime}}</view>
			</view>
		</view>
		<uni-load-more :contentText="contentText" @clickLoadMore="onClickLoadMore" :status="queryStatus">
		</uni-load-more>

		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<!-- <view class="title">SKY 艺术空间</view> -->
				<!-- <view class="subtitle">全新版本 即将上线</view> -->
				<image class="img" @load="onImgLoad" @error="onImgError" :src="imgUrl" mode="scaleToFill"></image>
				<!-- <button class="save" type="default" @click="handlerToSave">保存邀请码</button> -->
	<!-- 			<view class="hint">诚邀体验</view>
				<view class="descbox">
					<view class="box">1、微信扫码</view>
					<view class="box">2、实名注册</view>
					<view class="box">3、完善信息</view>
				</view> -->
				<!-- <view class="hint-2">GREAT WELFARE 尽享/大福利</view> -->
<!-- 				<view class="hint-3">邀请福利<text>《敬请期待》</text></view>
				<view class="hint-4">交易2%的返佣 永久有效</view>
				<view class="hint-3">新用户福利<text>《敬请期待》</text></view>
				<view class="hint-4">实名注册可抽取新品优先购 更多福利活动 详见公告</view> -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getWxQrcode,
		getSellRate,
		wxQrcodeDownload,
		getPromoteUserPage
	} from '../../request/invitation-api.js'

	import {
		getUserinfo
	} from '../../utils/utils.js'

	export default {
		data() {
			return {
				// 用户数据
				user: {},
				// 邀请总数
				total: 0,
				// 列表数据
				listData: [],
				// 查询参数
				params: {
					condition: "",
					pageNum: 0,
					pageSize: 10
				},
				// 二维码
				imgUrl: '',
				// 没有更多了
				isNoMore: false,
				// 加载状态
				queryStatus: 'more',
				// 各状态文字说明
				contentText: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			}
		},
		created() {
			this.user = getUserinfo()
			this.onLoadListData()
		},
		methods: {
			// popup 切换
			onToggleMenu(show, refName) {
				this.$tool.popupToggle(show, this, refName, 'center')
			},

			// 点击加载更多
			onClickLoadMore() {
				this.onLoadListData()
			},

			// 加载
			onImgLoad() {
				uni.hideLoading()
			},

			// 失败
			onImgError() {
				uni.hideLoading()
			},

			// 保存 二维码
			async handlerToSave() {
				await wxQrcodeDownload({
					wxUrl: this.imgUrl
				}).then((res) => {
					let base_64 = "data:image/png;base64," + btoa(new Uint8Array(res).reduce((data, byte) =>
						data + String.fromCharCode(byte), ''))
					let aLink = document.createElement('a')
					let blob = this.base64ToBlob(base_64)
					aLink.download = '邀请二维码.png'
					aLink.href = URL.createObjectURL(blob)
					aLink.click()
					if (aLink.href) {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: '保存失败',
							icon: 'error'
						})
					}
				})
			},

			// 数据转换
			base64ToBlob(code) {
				let parts = code.split(';base64,')
				let contentType = parts[0].split(':')[1]
				let raw = window.atob(parts[1])
				let rawLength = raw.length
				let uInt8Array = new Uint8Array(rawLength)
				for (let i = 0; i < rawLength; ++i) {
					uInt8Array[i] = raw.charCodeAt(i)
				}
				return new Blob([uInt8Array], {
					type: contentType
				})
			},

			// 生成二维码
			async onGenerateIng(id) {
				if (this.imgUrl) {
					this.onToggleMenu(true, 'popup')
					return false
				}
				uni.showLoading({
					title: '生成中...'
				})
				try {
					let {
						code,
						message,
						data
					} = await getWxQrcode()
					if (code === 200) {
						uni.hideLoading()
						uni.showToast({
							title: '生成成功',
							icon: 'success'
						})
						this.imgUrl = data
						uni.showLoading({
							title: '加载中...'
						})
						this.onToggleMenu(true, 'popup')
					} else {
						uni.hideLoading()
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch {
					uni.hideLoading()
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},
			// 获取全部数据
			async onLoadListData() {
				this.queryStatus = 'loading'
				this.params.pageNum += 1
				try {
					let {
						code,
						message,
						data
					} = await getPromoteUserPage(this.params)
					if (code === 200) {
						this.total = data.total
						if (this.params.pageNum <= data.totalPage) {
							this.isNoMore = false
							this.listData.push(...data.list)
							this.queryStatus = 'more'
						} else {
							this.isNoMore = true
							this.queryStatus = 'noMore'
						}
					} else {
						this.queryStatus = 'more'
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch {
					this.queryStatus = 'more'
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.invitation-page {
		width: 100%;
		background: $invitation-back-head-url no-repeat;
		background-size: 100% auto;
		background-position: 0 -50rpx;

		.head {
			width: 100%;
			height: 400rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.btn {
				color: #FFBD47;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #121212;
				box-shadow: -10px -10px 20px 0px rgba(39, 39, 39, 0.54), 10px 10px 20px 0px rgba(0, 0, 0, 0.83);
				border-radius: 22px;
				border: 4rpx solid #FFBD47;
			}

			.desc {
				font-size: 12px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #929B9D;
				margin: 20rpx;
				text-align: center;
			}

			.desc-2 {
				font-size: 9px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFBD47;
			}
		}
	}

	.info {
		width: 100%;
		height: 400rpx;
		background: $invitation-back-url no-repeat;
		background-size: 100% auto;
		background-position: 0 240rpx;

		.content {
			width: 100%;
			height: 100%;
			background: $invitation-back-center-url no-repeat;
			background-size: 100% auto;
			background-position: 0 0;
			padding-top: 75rpx;

			.item {
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.label {
					margin-right: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #BFCBCD;
				}

				.value {
					width: 360rpx;
					height: 60rpx;
					font-size: 12px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #7B7B7B;
					background: linear-gradient(45deg, #050505, #383838);
					border-radius: 12rpx;
					line-height: 60rpx;
					text-indent: 10rpx;
				}
			}
		}
	}

	.list {
		padding: 0 40rpx;

		.invitation-table-head {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid rgba(151, 151, 151, .2);
			margin-top: 20rpx;

			.table-head-item {
				flex: 1;
				color: #14181f;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #BFCBCD;
			}

			.table-head-item:nth-of-type(1) {
				max-width: 130rpx;
			}

			.table-head-item:nth-of-type(3) {
				text-align: center;
			}
		}

		.table-main-item {
			width: 100%;
			min-height: 94rpx;
			margin: 16rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid rgba(151, 151, 151, .2);
			color: #979797;

			.item-portrait {
				width: 130rpx;
				height: 56rpx;
				overflow: hidden;
				display: flex;
				align-items: center;

				img {
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
				}
			}

			.item-name {
				flex: 1;
				font-size: 28rpx;
			}

			.item-time {
				flex: 1;
				font-size: 28rpx;
				text-align: center;
			}
		}
	}

	.popup {
		width: 700rpx;
		height: 1000rpx;
		padding: 0 40rpx;
		background: url(../../static/img/invtation.jpg) no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		.title {
			line-height: 60rpx;
			font-size: 40rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			margin: 10rpx 0;
		}

		.subtitle {
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #8D8D8D;
		}

		.img {
			width: 200rpx;
			height: 200rpx;
			background: #000000;
			margin: 40rpx 0;
			background: none;
			position: absolute;
			bottom: 110rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.save {
			line-height: 60rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFBD47;
			margin-bottom: 40rpx;
			background: #121212;
			box-shadow: -10px -10px 20px 0px rgba(39, 39, 39, 0.54), 10px 10px 20px 0px rgba(0, 0, 0, 0.83);
			border-radius: 44rpx;
			border: 4rpx solid #FFBD47;
		}

		.hint {
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #9D9D9D;
		}

		.descbox {
			display: flex;
			justify-content: space-around;
			margin: 20rpx 0;

			.box {
				font-size: 20rpx;
				margin: 0 4rpx;
				padding: 2rpx 6rpx;
				border-radius: 0px 8px 0px 8px;
				opacity: 0.62;
				border: 2rpx dashed #F5FFA6;
				color: rgba(248, 223, 118, 1);
			}
		}

		.hint-2 {
			width: 100%;
			font-size: 24rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFBD47;
			letter-spacing: 2px;
			margin-bottom: 20rpx;
		}

		.hint-3 {
			width: 100%;
			font-size: 44rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			letter-spacing: 2px;
			margin-bottom: 20rpx;
			color: #FFFFFF;

			text {
				color: #8E8E8E;
				font-size: 24rpx;
			}
		}

		.hint-4 {
			width: 100%;
			font-size: 24rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #8F8E8F;
			letter-spacing: 2rpx;
			margin-bottom: 20rpx;
		}
	}
</style>
